<template>
  <div class="app-container">
    <div class="common-card damConfigForm">
      <el-form ref="ruleForm" :model="form" label-width="180px">
        <el-row>
          <!--
          <el-col :span="8">
            <el-form-item label="透明度(cm):">
              <el-slider v-model="form.transparency" :min="10" :max="50" show-input></el-slider>
            </el-form-item>
          </el-col>-->
          <el-col :span="8">
            <el-form-item label="PH:" prop="ph">
              <el-slider v-model="form.ph" :min="5.0" :max="10.0" :step="0.1" show-input></el-slider>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="溶解氧(mg／L):" prop="dissolvedOxygen">
              <!--<el-input v-model="form.dissolvedOxygen"  />-->
              <el-slider v-model="form.dissolvedOxygen" :min="0.1" :max="9.9" :step="0.1" show-input></el-slider>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="氨氮(mg／L):" prop="ammoniaNitrogen">
              <el-slider v-model="form.ammoniaNitrogen" :min="0" :max="0.5" :step="0.01" show-input></el-slider>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="亚硝酸盐(mg／L):" prop="nitrite">
              <el-slider v-model="form.nitrite" :min="0" :max="0.1" :step="0.01" show-input></el-slider>
            </el-form-item>
          </el-col>
          <!--
          <el-col :span="8">
            <el-form-item label="硫化氢(mg／L):" prop="hydrogen">
              <el-slider v-model="form.hydrogen" :min="0" :max="0.1" :step="0.01" show-input></el-slider>
            </el-form-item>
          </el-col>-->
        </el-row>
      </el-form>
      <div class="actionBox">
        <el-button type="success" @click="analyze">开始分析</el-button>
        <el-button @click="save">保存结果</el-button>
      </div>
    </div>
    <div class="result-section">
      <p>{{ analysisResult }}</p>
      <p v-if="advice">系统建议：{{ advice }}</p>
    </div>


  </div>
</template>

<script>
import { addQuality } from '@/api/quality'
export default {
  data() {
    return {
      form: {},
      ph: '',
      dissolvedOxygen: '',
      ammoniaNitrogen: '',
      nitrite: '',
      analysisResult: '请设置您的水质数据,以便系统进行分析诊断。',
      advice: ''
    };
  },
  methods: {
    save() {
      addQuality(this.form).then((res) => {
        if (res) {
          this.$message.success('保存水质数据成功')
          this.handleCancel()
        } else {
          this.$message.error('保存水质数据失败')
        }
      })
    },
    handleCancel() {
      this.$router.push({
        name: 'Science',
      })
    },
    analyze() {
      // 进行分析操作，可以在这里添加逻辑
      //pH值：6.0～8．8为宜。 
      //溶解氧：大于 4 mg／L为宜。 
      //氨氮：小于0．1 mg／L为宜。
      //亚硝酸盐：小于 0．05 mg／L为宜 。
      //硫化氢：小于0．03 mg／L为宜。
      if (6.0 <= this.form.ph <= 8.8 && this.form.dissolvedOxygen >= 4.0 && this.form.ammoniaNitrogen < 0.1 && this.form.dissolvedOxygen < 0.05) {
        this.analysisResult = '您的各项指标正常请再接再厉！';
        return
      }
      if (6.0 <= this.form.ph <= 8.8 && this.form.dissolvedOxygen < 4.0 && this.form.ammoniaNitrogen < 0.1 && this.form.dissolvedOxygen < 0.05) {
        this.analysisResult = '您的检测结果是Ph值正常、溶解氧含量低于正常范围、氨氮含量正常、亚硝酸盐含量正常。危险系数较低，容易解决。';
        this.advice = '（1）使用增氧机；（2）改善水面的通风和光照；（3）清除长塘中含有大量有机物的塘泥减少耗氧；（4）适当捕捞一部分达到商品规格的成鱼，降低养殖密度（5）使用商品推荐中的水产增氧片，使用后如果效果不明显请反馈给管理。';
        return
      }
      if (this.form.ph < 6.0 && this.form.dissolvedOxygen >= 4.0 && this.form.ammoniaNitrogen < 0.1 && this.form.dissolvedOxygen < 0.05) {
        this.analysisResult = '您的检测结果是Ph值低于正常值、溶解氧含量正常、氨氮含量正常、亚硝酸盐含量正常。危险系数较低，容易解决。';
        this.advice = '处于风险早期，尽早处理。使用商品推荐中的过氧化钙。';
        return
      }

      if (this.form.ph < 6.0 && this.form.dissolvedOxygen < 4.0 && this.form.ammoniaNitrogen < 0.1 && this.form.dissolvedOxygen < 0.05) {
        this.analysisResult = '您的检测结果是Ph值低于正常范围、溶解氧含量低于正常范围、氨氮含量正常、亚硝酸盐含量正常。危险系数较低，容易解决。这种现象应该是PH低降低了载氧能力，引起养殖产品的组织内缺氧、造成缺氧症状。';
        this.advice = '（1）可以采取简单的换水；（2）使用商品推荐中的过氧化钙；（3）使用商品推荐中的芽孢杆菌培藻改善，使用后如果效果不明显请反馈给管理。';
        return
      }

      if (this.form.ph < 6.0 && this.form.dissolvedOxygen < 4.0 && this.form.ammoniaNitrogen >= 0.1 && this.form.dissolvedOxygen < 0.05) {
        this.analysisResult = '您的检测结果是Ph值低于正常范围、溶解氧含量低于正常范围、氨氮含量高于正常范围、亚硝酸盐含量正常。危险系数高、较难解决。';
        this.advice = '使用商品推荐中的过硫酸氢甲解毒增氧净水底改片和在夜间或者清晨使用商品推荐中的水产增氧片或过氧化钙。待稳定下来以后再考虑是否换水。使用后如果效果不明显请反馈给管理。';
        return
      }

      if (this.form.ph < 6.0 && this.form.dissolvedOxygen < 4.0 && this.form.ammoniaNitrogen >= 0.1 && this.form.dissolvedOxygen >= 0.05) {
        this.analysisResult = '您的水质已经处于高危状态！';
        this.advice = '请立刻联系管理员！';
        return
      }

      if (this.form.ph > 8.8 && this.form.dissolvedOxygen >= 4.0 && this.form.ammoniaNitrogen < 0.1 && this.form.dissolvedOxygen < 0.05) {
        this.analysisResult = '您的检测结果是Ph值高于正常范围、溶解氧含量正常、氨氮含量正常、亚硝酸盐含量正常。危险系数较低，容易解决。';
        this.advice = '您的症状可能是水质太瘦导致。推荐使用商品推荐中的氨基酸肥水膏';
        return
      }


      this.analysisResult = '您的检测结果与正常情况相悖。';
      this.advice = '请及时联系管理员或请输入正确的检测结果。';
    }
  }
};
</script>

<style lang="scss" scoped>
.damConfigForm {
  padding: 40px;

  .title {
    font-size: 20px;
    font-weight: 800;
  }

  .actionBox {
    display: flex;
    justify-content: center;
  }
}

.result-section {
  /**
  border: 1px solid #ccc;
   */

  border-radius: 4px;
  padding: 20px;
  margin-left: 80px;
  font-size: x-large;
}
</style>
